<template>
  <div class="profile-page">
    <h2>个人中心</h2>

    <el-row :gutter="20">
      <!-- 个人信息 -->
      <el-col :span="8">
        <el-card class="profile-card">
          <template #header>
            <div class="card-header">
              <span>个人信息</span>
            </div>
          </template>
          <div class="profile-info">
            <el-avatar :size="80" class="avatar">
              {{ userStore.userInfo?.username?.charAt(0) }}
            </el-avatar>
            <div class="user-name">{{ userStore.userInfo?.name }}</div>
            <div class="user-level">{{ stats.memberLevel || '普通会员' }}</div>
            
            <div class="info-list">
              <div class="info-item">
                <span class="label">用户名：</span>
                <span class="value">{{ userStore.userInfo?.username }}</span>
              </div>
              <div class="info-item">
                <span class="label">手机号：</span>
                <span class="value">{{ userStore.userInfo?.phone }}</span>
              </div>
              <div class="info-item">
                <span class="label">邮箱：</span>
                <span class="value">{{ userStore.userInfo?.email || '未设置' }}</span>
              </div>
              <div class="info-item">
                <span class="label">地址：</span>
                <span class="value">{{ userStore.userInfo?.address || '未设置' }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 消费统计 -->
      <el-col :span="16">
        <el-card class="stats-card">
          <template #header>
            <div class="card-header">
              <span>消费统计</span>
            </div>
          </template>
          
          <div v-loading="loading" class="stats-content">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="stat-item orders">
                  <div class="stat-icon">
                    <el-icon :size="36"><Tickets /></el-icon>
                  </div>
                  <div class="stat-info">
                    <div class="stat-value">{{ stats.totalOrders || 0 }}</div>
                    <div class="stat-label">总订单数</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-item spending">
                  <div class="stat-icon">
                    <el-icon :size="36"><Money /></el-icon>
                  </div>
                  <div class="stat-info">
                    <div class="stat-value">¥{{ stats.totalSpending || 0 }}</div>
                    <div class="stat-label">总消费金额</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-item avg">
                  <div class="stat-icon">
                    <el-icon :size="36"><DataLine /></el-icon>
                  </div>
                  <div class="stat-info">
                    <div class="stat-value">¥{{ stats.avgOrderAmount || 0 }}</div>
                    <div class="stat-label">平均订单金额</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="stat-item refund">
                  <div class="stat-icon">
                    <el-icon :size="36"><RefreshLeft /></el-icon>
                  </div>
                  <div class="stat-info">
                    <div class="stat-value">{{ stats.refundCount || 0 }}</div>
                    <div class="stat-label">退款次数</div>
                  </div>
                </div>
              </el-col>
            </el-row>

            <!-- 会员权益 -->
            <div class="benefits-section">
              <h4>会员权益</h4>
              <div class="benefits-grid">
                <div class="benefit-item">
                  <el-icon class="benefit-icon" color="#67c23a"><Check /></el-icon>
                  <span>积分返利</span>
                </div>
                <div class="benefit-item">
                  <el-icon class="benefit-icon" color="#67c23a"><Check /></el-icon>
                  <span>专属客服</span>
                </div>
                <div class="benefit-item">
                  <el-icon class="benefit-icon" color="#67c23a"><Check /></el-icon>
                  <span>生日优惠</span>
                </div>
                <div class="benefit-item">
                  <el-icon class="benefit-icon" color="#67c23a"><Check /></el-icon>
                  <span>优先配送</span>
                </div>
              </div>
            </div>

            <!-- 快捷入口 -->
            <div class="quick-links">
              <el-button type="primary" @click="$router.push('/customer/orders')">
                <el-icon><Tickets /></el-icon> 我的订单
              </el-button>
              <el-button type="success" @click="$router.push('/customer/refunds')">
                <el-icon><RefreshLeft /></el-icon> 退货记录
              </el-button>
              <el-button type="warning" @click="$router.push('/customer/cart')">
                <el-icon><ShoppingCart /></el-icon> 购物车
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getMyStats } from '@/api/dashboard'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const loading = ref(false)
const stats = reactive({
  totalOrders: 0,
  totalSpending: 0,
  avgOrderAmount: 0,
  refundCount: 0,
  refundAmount: 0,
  memberLevel: '普通会员'
})

// 加载个人统计
const loadStats = async () => {
  loading.value = true
  try {
    const res = await getMyStats()
    if (res.code === 200) {
      Object.assign(stats, res.data)
    } else {
      ElMessage.error(res.message || '加载统计数据失败')
    }
  } catch (error) {
    console.error('加载统计数据失败', error)
    ElMessage.error('加载统计数据失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadStats()
})
</script>

<style scoped lang="scss">
.profile-page {
  padding: 20px;

  h2 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
  }

  .card-header {
    font-size: 16px;
    font-weight: bold;
  }

  .profile-card {
    .profile-info {
      text-align: center;

      .avatar {
        margin-bottom: 15px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        font-size: 32px;
        font-weight: bold;
      }

      .user-name {
        font-size: 20px;
        font-weight: bold;
        color: #303133;
        margin-bottom: 8px;
      }

      .user-level {
        display: inline-block;
        padding: 4px 12px;
        background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
        color: #333;
        border-radius: 12px;
        font-size: 12px;
        font-weight: bold;
        margin-bottom: 20px;
      }

      .info-list {
        text-align: left;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #ebeef5;

        .info-item {
          display: flex;
          margin-bottom: 12px;
          font-size: 14px;

          &:last-child {
            margin-bottom: 0;
          }

          .label {
            color: #909399;
            min-width: 70px;
          }

          .value {
            color: #303133;
            flex: 1;
          }
        }
      }
    }
  }

  .stats-card {
    .stats-content {
      .stat-item {
        display: flex;
        align-items: center;
        padding: 20px;
        background: #f7f8fa;
        border-radius: 8px;
        transition: transform 0.2s;

        &:hover {
          transform: translateY(-4px);
        }

        .stat-icon {
          margin-right: 15px;
          opacity: 0.8;
        }

        .stat-info {
          flex: 1;

          .stat-value {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 4px;
          }

          .stat-label {
            font-size: 13px;
            color: #909399;
          }
        }

        &.orders {
          .stat-icon {
            color: #409eff;
          }
          .stat-value {
            color: #409eff;
          }
        }

        &.spending {
          .stat-icon {
            color: #67c23a;
          }
          .stat-value {
            color: #67c23a;
          }
        }

        &.avg {
          .stat-icon {
            color: #e6a23c;
          }
          .stat-value {
            color: #e6a23c;
          }
        }

        &.refund {
          .stat-icon {
            color: #f56c6c;
          }
          .stat-value {
            color: #f56c6c;
          }
        }
      }

      .benefits-section {
        margin-top: 30px;
        padding: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 8px;
        color: white;

        h4 {
          margin-bottom: 15px;
          font-size: 16px;
        }

        .benefits-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 12px;

          .benefit-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;

            .benefit-icon {
              font-size: 20px;
            }
          }
        }
      }

      .quick-links {
        margin-top: 20px;
        display: flex;
        gap: 12px;
        justify-content: center;
      }
    }
  }
}
</style>
